<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册</title>
  <link rel="stylesheet" href="./css/reg.css">
  <link rel="stylesheet" href="./css/base.css">
  <script src="./js/base.js"></script>
</head>
<body>
    <div id="reg">
      <form action="/login.html" @submit="onSubmit">
        <div class="row">
          <div class="label">
            昵称：
          </div>
          <input v-model="form.username" type="text" required class="inp">
        </div>
        <div class="row">
          <div class="label">
            密码：
          </div>
          <input v-model="form.password" type="password" required class="inp">
        </div>
        <div class="row">
          <div class="label">
            邮箱：
          </div>
          <input v-model="form.email" type="email" required class="inp">
        </div>
        <div class="row">
          <div class="label">
            年龄：
          </div>
          <input v-model="form.age" type="number" required class="inp">
        </div>
        <div class="row">
          <div class="label">
            性别：
          </div>
          <div>
            <input v-model="form.gender" id="nan" type="radio" value="男" required class="inp">
            <label for="nan">男</label>
            <input v-model="form.gender" id="nv" type="radio" value="女" required class="inp">
            <label for="nv">女</label>
          </div>
        </div>
        <div class="row">
          <div class="label">
            生日：
          </div>
          <input v-model="form.birthday" type="date" value="男" required class="inp">
        </div>
        <input class="sub-btn" type="submit" value="提交">
      </form>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
  var login = new Vue({
    el: '#reg',
    data() {
      return {
        form: {
          username: '',
          password: '',
          email: '',
          age: 20,
          gender: '男',
          birthday: ''
        }
      }
    },
    methods: {
      onSubmit() {
        const list = getSession('userList') || [];
        list.push(this.form);
        setSession('userList',list);
      }
    }
  })
</script>
</html>